<template>
  <div class="main-layout">
    <div v-if="showToast" :class="['toast', toastType]">{{ toastMsg }}</div>
    <div class="main-content">
      <button class="back-btn" @click="goBack" title="返回主页">← 返回</button>
      <form class="post-form" @submit.prevent="handleSubmit">
        <div class="form-title">分享你的新鲜事吧！</div>
        <div class="form-group">
          <label for="post-title">标题</label>
          <input id="post-title" v-model="title" maxlength="50" :disabled="isLoading" required />
        </div>
        <div class="form-group">
          <label for="post-content">内容</label>
          <textarea
            id="post-content"
            v-model="content"
            rows="7"
            maxlength="1000"
            :disabled="isLoading"
            required
            @input="autoResizeTextarea"
          />
        </div>
        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
        <div class="form-actions">
          <button class="submit-btn" type="submit" :disabled="isLoading">
            {{ isLoading ? '发布中...' : '发布' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/services/api'

const router = useRouter()
const title = ref('')
const content = ref('')
const isLoading = ref(false)
const errorMsg = ref('')

// 新增：弹窗相关
const showToast = ref(false)
const toastMsg = ref('')
const toastType = ref('') // 'success' or 'error'
let toastTimer = null

function showAutoToast(msg, type = 'success') {
  toastMsg.value = msg
  toastType.value = type
  showToast.value = true
  if (toastTimer) clearTimeout(toastTimer)
  toastTimer = setTimeout(() => {
    showToast.value = false
  }, 2000)
}

function goBack() {
  router.push({ name: 'home' })
}

async function handleSubmit() {
  errorMsg.value = ''
  if (!title.value.trim() || !content.value.trim()) {
    errorMsg.value = '标题和内容不能为空'
    return
  }
  isLoading.value = true
  try {
    const res = await api.createPost({ title: title.value, content: content.value })
    if (res.data && res.data.code === 0) {
      showAutoToast('发帖成功', 'success')
      setTimeout(() => {
        router.push({ name: 'home' })
      }, 500) // 先弹窗再跳转，体验更好
    } else {
      showAutoToast(res.data?.msg || '发帖失败', 'error')
    }
  } catch {
    showAutoToast('发帖请求失败', 'error')
  } finally {
    isLoading.value = false
  }
}

// 内容输入框自适应高度
function autoResizeTextarea(e) {
  const el = e.target
  el.style.height = 'auto'
  el.style.height = el.scrollHeight + 'px'
}
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--color-bg);
}
.main-content {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-input-bg);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 2rem 1.5rem 2.5rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
.back-btn {
  margin-top: 0.5rem;
  margin-left: 0.2rem;
  margin-bottom: 1.2rem;
  background: var(--color-primary);
  color: var(--color-button-text);
  border: none;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  box-shadow:
    0 4px 16px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 4px 0 rgba(0, 0, 0, 0.1);
  transition:
    background 0.2s,
    color 0.2s;
  z-index: 10;
  align-self: flex-start;
}
.back-btn:hover {
  background: var(--color-primary-hover);
  color: var(--color-button-text);
}
.post-form {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: transparent;
  box-sizing: border-box;
  position: relative;
}
.form-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-align: left;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label {
  font-weight: 500;
  color: var(--color-text-label);
}
.form-group input {
  border: 1px solid var(--color-border-input);
  border-radius: 0.25rem;
  padding: 1.05rem 1.2rem;
  font-size: 1.25rem;
  background: var(--color-surface, var(--color-input-bg));
  color: var(--color-text);
  transition: border-color 0.2s;
  height: 2.7rem;
}
.form-group input:focus {
  border-color: var(--color-primary);
  outline: none;
}
.form-group textarea {
  border: 1px solid var(--color-border-input);
  border-radius: 0.25rem;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  background: var(--color-surface, var(--color-input-bg));
  color: var(--color-text);
  resize: none;
  min-height: 7rem;
  max-height: 40vh;
  overflow: hidden;
  transition: border-color 0.2s;
}
.form-group textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}
.error-msg {
  color: var(--color-error);
  font-size: 1rem;
  margin-bottom: -0.5rem;
}
.form-actions {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.5rem 0.2rem 0 0;
  display: flex;
  justify-content: flex-end;
  width: auto;
}
.submit-btn {
  background: var(--color-primary);
  color: var(--color-button-text);
  border: none;
  border-radius: 0.25rem;
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 4px 16px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 4px 0 rgba(0, 0, 0, 0.1);
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.submit-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}
.submit-btn:disabled {
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}
@media (max-width: 700px) {
  .post-form {
    max-width: 100%;
    padding: 0;
  }
  .form-actions {
    right: 0.5rem;
    top: 0.5rem;
  }
}
.toast {
  position: fixed;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 120px;
  max-width: 80vw;
  background: #222c;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 0.7rem;
  font-size: 1.1rem;
  text-align: center;
  z-index: 9999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0.97;
  transition: opacity 0.2s;
}
.toast.success {
  background: #4caf50ee;
}
.toast.error {
  background: #e53935ee;
}
</style>
